<template>
	<div id="selfPwdChange" class="selfPwdChange">
		<group label-width="4.5em" label-margin-right="2em" label-align="right">
			<x-input class="phoneCell" title="手机" v-model="username" disabled></x-input>
			<x-input title="旧密码" type="password" v-model="old_password"></x-input>
			<x-input title="新密码" type="password" v-model="new_password"></x-input>
			<x-input title="密码确认" type="password" v-model="new_confirm_password"></x-input>
		</group>
		<div class="error" v-show="error">{{error}}</div>
		<div v-transfer-dom>
			<alert v-model="show" title="密码修改成功" @on-show="onShow" @on-hide="onHide"> 请重新登录 </alert>
		</div>
		<flexbox>
			<flexbox-item>
				<x-button class="flexBtn" type="primary" @click.native="updateUser">确定</x-button>
			</flexbox-item>
			<flexbox-item>
				<x-button class="flexBtn" type="warn" @click.native="cancelUpdate">取消</x-button>
			</flexbox-item>
		</flexbox>
	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import NetWorking from '../../../utils/networking'
	import {Alert, Group, XInput, XButton, Flexbox, FlexboxItem, TransferDomDirective as TransferDom} from 'vux'

	export default {
		name: "new-user",
		components: {
			Alert,
			Group,
			XInput,
			XButton,
			Flexbox,
			FlexboxItem
		},
		directives: {
			TransferDom
		},
		data() {
			return {
				id: this.$store.state.user.userModel.sysUser.id,
				username: '',
				old_password: '',
				new_password: '',
				new_confirm_password: '',
				error: '',
				show: false
			}
		},
		created: function () {
			bus.$emit("barController", 1)
			bus.$emit("setTopSimpleTitle", '修改密码')

			let _this = this
			NetWorking.doGet(
				'users/'+this.id,
				null,
				null
			).then(
				response => {
					let rs = response.data
					if(rs.error_code == 0){
						_this.username = rs.user.username
					}
				}
			)
		},
		methods: {
			onShow: function () {
				console.log('onShow')
			},
			onHide: function () {
				location.replace('/login')
			},
			cancelUpdate: function () {
				this.$router.go(-1)
			},
			updateUser: function () {
				if(this.new_password == '' || this.old_password == ''){
					this.error = "请输入正确的密码"
					return
				}

				if(this.new_password != this.new_confirm_password){
					this.error = "两次密码输入不一致"
					return
				}

				let _this = this
				NetWorking.doPost(
					'users/chgpwd',
					null,
					null,
					{
						params: {
							username: this.username,
							oldPwd: this.old_password,
							newPwd: this.new_password
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.show = true
						}else{
							alert(rs.error_message)
						}
					}
				)
			}
		}
	}
</script>

<style>
	.error{
		font-size: 15px;
		color:red;
		text-align: center;
		margin-top: 10px;
	}

	.selfPwdChange {
		border: solid;
		border-color: #f7f7fa;
		margin-left: 5px;
		margin-right: 5px;
		margin-top: 56px;
		box-shadow: 5px 5px 5px #888888;
		border-radius: 25px;
		margin-bottom: 100px;
		background-color: white;
	}

	.flexBtn {
		width: 100%;
		margin-top: 15px;
		border-radius: 25px;
		margin-bottom: 10px;
	}

</style>